<template>

	<view class="content">
		<uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom"
			@fabClick="addStoreBtnAction" />
		<view style="display: flex; justify-content: space-between; align-items: center; font-weight: 700;" class="item"
			v-for="(item, index) in list">
			<view class="">
				<view class="">
					店铺名称:{{" " + item.store}}
				</view>
				<view class="">
					员工名称:{{" " + item.name}}
				</view>
				<view class="">
					手机号:{{" " + item.phone}}
				</view>
			</view>

			<view class="" style="display: flex; flex-direction: column;">
				<!-- <button type="primary" size="mini" :data-index="index" @click="bianjiBtnAction">编辑</button> -->
				<button style="margin-top: 20rpx;" :data-index="index" @click="shaunchuBtnAction" type="warn"
					size="mini">删除</button>

			</view>
		</view>

		<view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" content="确定是否此员工"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" :title="status == 0 ? '添加店铺':'编辑店铺'" value=""
				@confirm="addBtnAction">
				<view class="" style="width: 100%;">
					<view class="">
						<view class="title-left">
							营业厅名称
						</view>
						<view class="">
							<uni-data-select v-model="value" :localdata="range" @change="change"
								:clear="false"></uni-data-select>
						</view>
					</view>
					<view class="">
						<view class="title-left">
							员工姓名
						</view>
						<view class="box-border">
							<input type="text" placeholder="请输入用户姓名" v-model="data.name">
						</view>
					</view>

					<view class="">
						<view class="title-left">
							员工手机号
						</view>
						<view class="box-border">
							<input type="text" placeholder="请输入用户手机号" v-model="data.phone">
						</view>
					</view>
				</view>

			</uni-popup-dialog>

		</uni-popup>

	</view>


</template>

<script>
	import api from '../../utils/interface.js'

	export default {
		data() {
			return {
				value: 0,
				range: [],
				data: {},
				list: [],
				item: {}
			}
		},
		onLoad() {
			this.getData()
			this.getUserListData()
		},
		methods: {
			async dialogConfirm() {
				const config = {
					url: api.baseUrl + api.deleteUser,
					method: 'post',
					data: this.item
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					uni.showToast({
						icon: "none",
						title: "删除成功"
					})
					this.getUserListData()
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			shaunchuBtnAction(e) {
				console.log();
				const index = e.currentTarget.dataset.index
				this.item = this.list[index];
				this.$refs.alertDialog.open()
			},
			addStoreBtnAction() {
				this.data = {}
				this.value = 0;
				this.data.sid = this.range[this.value].id
				this.data.store = this.range[this.value].name

				this.$refs.inputDialog.open()
			},
			async getUserListData() {
				console.log();
				const config = {
					url: api.baseUrl + api.getUserList,
					method: 'get'
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					this.list = data
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			change(e) {
				console.log("e:", e);
				this.data.sid = this.range[e].id
				this.data.store = this.range[e].name

				console.log("e:", this.data);
			},
			async addBtnAction() {
				console.log(this.data);
				const config = {
					url: api.baseUrl + api.addUser,
					method: 'post',
					data: this.data
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(data);
				if (code == 1) {
					uni.showToast({
						icon: "none",
						title: '添加成功'
					})
					this.getUserListData()
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			async getData() {

				const config = {
					url: api.baseUrl + api.getStoreList,
					method: 'post',
					data: this.data
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				if (code == 1) {
					this.range = data
					for (var i = 0; i < this.range.length; i++) {
						const item = this.range[i];
						item.value = i;
						item.text = item.name
					}
					this.data.sid = this.range[this.value].id
					this.data.store = this.range[this.value].name
					console.log(this.range);
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #e5e5e5;
	}

	.item {
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: white;
		border-radius: 12rpx;
	}

	.content {
		margin: 20rpx;
		font-size: 28rpx;
	}

	.title-left {
		border-left: 8rpx solid #007aff;
		padding: 0 20rpx;
		margin: 20rpx;
		font-weight: 700;
	}

	.box-border {
		border: 2rpx solid #e5e5e5;
		padding: 10rpx;
	}
</style>